<template>
  <div style="display: inline">
    <el-button type="primary" @click="dialog = true">自定义数据项</el-button>
    <el-dialog
      title="自定义数据项"
      :visible.sync="dialog"
      width="800px"
    >
      <div class="custom-fields-wrap">
        <div class="custom-fields">
          <div class="left">
            <div class="select-item title">
              <el-checkbox :indeterminate="isIndeterminate" :value="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <div>选择你想要的数据项</div>
            </div>
            <div class="select-list">
              <div class="select-item"
               v-for="item in defaultFieldsConfig"
               :key="item.prop"
              >
                <el-checkbox
                  :value="checkField(item.prop)"
                  @change="handleCheckField(item)"
                  :disabled="item.required"
                >{{ item.label }}</el-checkbox>
                <div></div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="select-item title">
              <div class="text">已选择 {{ selectedFields.length }} 项</div>
              <el-button type="text" @click="handleCheckAllChange()">全部移除</el-button>
            </div>
            <draggable
              class="select-list draggable"
              v-model="selectedFields"
              @end="onEnd"
              :move="onMove"
            >
              <div
                v-for="(item, index) in selectFieldsItems"
                :key="item.prop"
                class="select-item"
              >
                <div class="text">
                  {{ item.label }}
                </div>

                <div class="action">
                  <el-button type="text" :disabled="index === 0 || !!item.fixed" @click="moveUp(index)">上移</el-button>
                  <el-button type="text" :disabled="index === selectedFields.length - 1 || !!item.fixed" @click="moveDown(index)">下移</el-button>
                  <el-button type="text" class="danger" :disabled="item.required" @click="removeItem(item);">移除</el-button>
                  <el-popover
                    placement="right"
                    width="300"
                    trigger="click"
                    class="mgl10"
                  >
                    <el-form :model="item" label-width="80px" class="field-form">
                      <el-form-item label="字段名">
                        {{item.label}}
                      </el-form-item>
                      <el-form-item label="宽度">
                        <el-input v-model="item.minWidth"></el-input>
                      </el-form-item>
                    </el-form>
                    <el-button type="text" slot="reference">更多设置</el-button>
                  </el-popover>
                </div>
              </div>
            </draggable>
          </div>
        </div>
        <div class="button">
          <el-button @click="dialog = false">取消</el-button>
          <el-button type="primary" @click="submit()">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {count} from "echarts/src/component/dataZoom/history";
import {deepClone, deepCopy} from "@/utils";
import draggable from 'vuedraggable'
import i18n from "@/lang";

export default {
  components: {
    draggable,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    initUserSelectedFields: {
      type: Array,
      default() {
        return [];
      },
    },
    defaultFieldsConfig: {
      type: Array,
      required: true,
      default() {
        return [
          {
            prop: 'goodsImage',
            label: '示例',
            align: 'center',
            minWidth: '110',
            // 固定
            // fixed: true,
            // 必填
            required: true,
          }
        ];
      },
    },
  },
  data() {
    return {
      selectedFields: [],
      dialog: false,
    }
  },
  watch: {
    dialog(val) {
      if (val) {
        this.initData();
      }
    }
  },
  computed: {
    // computedDialogVisible: {
    //   get() {
    //     return this.dialogVisible;
    //   },
    //   set(val) {
    //     this.$emit('update:dialogVisible', val);
    //   }
    // },
    activeFieldsConfig() {
      return this.defaultFieldsConfig.filter(v => !v.required);
    },
    isIndeterminate() {
      return this.selectedFields.length > 0 && this.selectedFields.length < this.defaultFieldsConfig.length;
    },
    checkAll() {
      return this.selectedFields.length > 0 && !this.activeFieldsConfig.some(v => this.selectedFields.findIndex(item=> item.prop === v.prop) === -1);
    },
    selectFieldsItems() {
      const selectFieldsItems = [];
      this.selectedFields.forEach(filed => {
        const item = this.defaultFieldsConfig.find(v => v.prop === filed.prop);
        const item2 = this.selectedFields.find(v => v.prop === filed.prop)
        if(item2){
          if(item){
            for (const itemKey in item) {
              if(!item2[itemKey]){
                item2[itemKey] = item[itemKey]
              }
            }
          }
          selectFieldsItems.push(item2)
        }else if(item) {
          selectFieldsItems.push(item);
        }
      });
      return selectFieldsItems;
    },
    leftFixedField(){
      const obj = {}
      let index = 0;
      this.selectFieldsItems.forEach(item => {
        if(item.fixed === true || item.fixed === 'left'){
          obj[item.prop] = index
          index++
        }
      })
      return obj
    },
    rightFixedField(){
      const obj = {}
      let index = this.selectFieldsItems.length - 1;
      this.selectFieldsItems.forEach(item => {
        if(item.fixed === 'right'){
          obj[item.prop] = index
          index--
        }
      })
      return obj
    }
  },
  created() {
    this.initData();
  },
  methods: {
    count,
    // 初始化
    initData() {
      if (!this.initUserSelectedFields) {
        this.selectedFields = this.defaultFieldsConfig.map(item => {
          return {
            prop: item.prop,
            minWidth: item.minWidth,
          }
        });
      } else {
        this.selectedFields = this.initUserSelectedFields;
      }
    },
    handleRemoveAll() {
      this.selectedFields = this.defaultFieldsConfig.filter(item => item.required).map(item => {
        return {
          prop: item.prop,
          minWidth: item.minWidth,
        }
      });
    },
    handleCheckAllChange() {
      if (this.checkAll) {
        this.selectedFields = this.defaultFieldsConfig.filter(item => item.required).map(item => {
          return {
            prop: item.prop,
            minWidth: item.minWidth,
          }
        });
      } else {
        this.selectedFields = this.defaultFieldsConfig.map(item => {
          return {
            prop: item.prop,
            minWidth: item.minWidth,
          }
        });
      }
    },
    checkField(prop) {
      return this.selectedFields.findIndex(item => item.prop === prop) > -1;
    },
    handleCheckField(row) {
      const index = this.selectedFields.findIndex(item=> item.prop === row.prop);
      if (index > -1) {
        this.selectedFields.splice(index, 1);
      } else {
        this.selectedFields.push({
          prop: row.prop,
          minWidth: row.minWidth,
        });
      }
    },
    moveUp(index) {
      if (index > 0) {
        const temp = this.selectedFields[index - 1];
        if (temp) {
          const selectedFields = deepClone(this.selectedFields);
          selectedFields[index - 1] = selectedFields[index];
          selectedFields[index] = temp;
          this.selectedFields = selectedFields;
        }
      }
    },
    moveDown(index) {
      if (index < this.selectedFields.length - 1) {
        const temp = this.selectedFields[index + 1];
        if (temp) {
          const selectedFields = deepClone(this.selectedFields);
          selectedFields[index + 1] = selectedFields[index];
          selectedFields[index] = temp;
          this.selectedFields = selectedFields;
        }
      }
    },
    removeItem(item) {
      if (item.required) {
        return false;
      }
      const index = this.selectedFields.findIndex(_item => _item.prop === item.prop);
      if (index > -1) {
        this.selectedFields.splice(index, 1);
      }
    },
    onEnd(e){
      for (const field in this.leftFixedField) {
        // const index = this.leftFixedField[field]
        // const fieldIndex = this.selectFieldsItems.findIndex(item=> item.prop === field)
        // this.selectFieldsItems[index] = this.selectFieldsItems.splice(fieldIndex,1,this.selectFieldsItems[index])[index]
      }

      for (const field in this.rightFixedField) {
        // const index = this.rightFixedField[field]
        // console.log(index)
        // const fieldIndex = this.selectFieldsItems.findIndex(item=> item.prop === field)
        // console.log(fieldIndex)
        // this.selectFieldsItems[index] = this.selectFieldsItems.splice(fieldIndex,1,this.selectFieldsItems[index])[index]
      }
    },
    onMove(e){
      return  true
    },
    submit() {
      this.dialog = false
      const data = this.selectedFields.map(item => {
        return {
          minWidth: item.minWidth,
          prop: item.prop,
        }
      })
      this.$emit('submit', data);
    },
  }
}
</script>

<style scoped lang="less">
.custom-fields-wrap{
  @borderColor: #D7D7D7;
  .custom-fields{
    display: flex;
    border-top: 1px solid @borderColor;
    border-bottom: 1px solid @borderColor;
    .left{
      width: 50%;
      border-right: 1px solid @borderColor;
    }
    .right{
      width: 50%;
    }
  }
  .select-list{

  }
  .select-item{
    height: 42px;
    padding: 10px 20px 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.title{
      border-bottom: 1px solid @borderColor;
    }
    .action{
      .el-button{
        font-weight: bolder;
        &.danger{
          color: #F7232E;
        }
        &.is-disabled{
          color: #999999;
        }
      }
    }

  }
  .draggable{
    .select-item{
      cursor: move;
    }
  }
  .button{
    text-align: right;
    margin-top: 20px;
  }

}
</style>

<style>
.field-form{
  .el-form-item:last-child{
    margin-bottom: 0px;
  }
}
</style>
